<template>
  <div class="page-wrapper">
    <!-- 顶部工具栏 -->
    <PageTools :show-before="true">
      <template #before>
        共有{{ total }}数据
      </template>
      <template #after>
        <!-- v-if="checkPerm('addemployee')"通过一个函数, 传入按钮名字, 对比个人二级权限列表 points, 控制按钮是否显示 -->
        <el-button v-if="checkPerm('addemployee')" type="primary" size="small" @click="isShowDialog = true">新增</el-button>
        <el-button type="success" size="small" @click="$router.push('/employees/import')">导入</el-button>
        <el-button type="primary" size="small" @click="export2Excel">导出</el-button>
      </template>
    </PageTools>
    <!-- 主要内容表格 -->
    <el-card>
      <el-table :data="list" border>
        <el-table-column label="序号" sortable="" type="index" />
        <el-table-column label="姓名" sortable="" prop="username" />
        <el-table-column label="工号" sortable="" prop="workNumber" />
        <el-table-column label="聘用形式" sortable="" prop="formOfEmployment" :formatter="formatEmployment" />
        <el-table-column label="部门" sortable="" prop="departmentName" />
        <el-table-column label="入职时间" sortable="" prop="timeOfEntry">
          <template v-slot="scope">
            <!-- 过滤器使用, 管道符号 | 后面接上过滤器名即可
            这里的意思是, 将 | 前面的数据作为参数
            传给后面的过滤器, 其中过滤器函数的返回值会被
            只注意过滤器只在 template 模板范围中有效 -->
            <!-- {{ 旧数据 | 过滤器}} -->
            {{ scope.row.timeOfEntry | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="账户状态" sortable="">
          <template v-slot="scope">
            <!-- 本来开关组件需要绑定一个布尔值
            但是之前发现scope.row.enableState是个数字 -->
            <el-switch
              v-model="scope.row.enableState"
              disabled
              :active-value="1"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" sortable="" fixed="right" width="280">
          <template v-slot="scope">
            <!-- 路由带参跳转 -->
            <el-button type="text" size="small" @click="$router.push(`/employees/detail/${scope.row.id}`)">查看</el-button>
            <el-button type="text" size="small" @click="showRoleDialog(scope.row.id)">分配角色</el-button>
            <el-button type="text" size="small" @click="delEmployee(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          :total="total"
          :page-size="pageConfig.size"
          layout="prev, pager, next"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <!-- 附加弹框 -->
    <EmployeeDialog :is-show-dialog="isShowDialog" />
    <!-- 角色的弹框 -->
    <AssignRole ref="roleForm" :is-show-dialog="isShowRoleDialog" @closeDialog="isShowRoleDialog = false" />
  </div>
</template>

<script>
// getEmployee是封装获取员工列表(更详细)
import { getEmployee, delEmployee } from '@/api/employee'
// 导入枚举
import EmployeeEnum from '@/constant/employees'
// 导入封装好的excel的导出生成excel文件的方法
import { export_json_to_excel } from '@/vendor/Export2Excel'
// 导出时需要处理时间, 但是可惜过滤器没法在 js 部分使用
// 可以直接引入注册过滤器时用到的那个函数, 直接使用
import { formatDate } from '@/filters'
// 引入新增的弹框
import EmployeeDialog from './employee-dialog.vue'
// 引入角色的弹框
import AssignRole from './components/assign-role.vue'
// 导入获取之前封装的获取员工信息
import { getUserDetailById } from '@/api/user'
export default {
  components: {
    EmployeeDialog,
    AssignRole
  },
  data() {
    return {
      list: [],
      total: 0,
      pageConfig: {
        page: 1,
        size: 5
      },
      // 新增的弹框
      isShowDialog: false,
      // 角色的弹框
      isShowRoleDialog: false
    }
  },
  // created（）{}调用函数
  created() {
    this.loadList()
  },
  // 方法写在methods里面
  methods: {
    // 通过一个函数, 传入按钮名字, 对比个人二级权限列表 points, 控制按钮是否显示
    // 意思就是说，没有这个权限的话，按钮的权限就不显示
    checkPerm(name) {
      const points = this.$store.state.user.userInfo.roles.points
      return points.indexOf(name) !== -1
    },
    // 点击角色触发的函数
    async showRoleDialog(userId) {
      const res = await getUserDetailById(userId)
      console.log('修改员工的数据', res)
      console.log('其中员工旧角色列表', res.roleIds)
      this.$refs.roleForm.id = userId
      this.$refs.roleForm.checkList = res.roleIds
      // 点击弹出修改员工角色弹窗
      // 另外其实点击哪个员工, 就要把他原来角色
      // 显示在子组件的 checkList 里面
      this.isShowRoleDialog = true
    },
    // loadList的方法，里面发起请求
    async loadList() {
      // 带上翻页参数调用api函数
      const res = await getEmployee(this.pageConfig)
      console.log('员工数据', res)
      this.list = res.rows
      this.total = res.total
      console.log(this.list)
    },
    currentChange(newPage) {
      // 这里是用户点击分页触发
      // 要拿到当前最新页码交给页面配置,
      this.pageConfig.page = newPage
      // 然后发请求即可
      this.loadList()
    },
    // formatter方法是表格table里面的用来格式化内容的方法
    // 格式化聘用形式
    // 这个函数被赋值给列的 formatter 属性
    // 他的返回值会覆盖原来的内容
    formatEmployment(row, col, cell) {
      // 形参叫啥不要紧, 按顺序传参
      // 这个函数默认接收几个参数
      // console.log('当前格子数据', cell)
      // if (+cell === 1) {
      //   // 这里的return是返回的值，赋值给变量formatEmployment，在formatter渲染
      //   return '正式工'
      // }
      // if (+cell === 2) {
      //   return '临时工'
      // }

      // 除了 if 判断, 还能用一个数组储存所有的选项
      // 这种将所有可能性,列举出来的形式, 就叫枚举数据
      // const hireType = [
      //   { id: 1, value: '正式工' },
      //   { id: 2, value: '临时工' }
      // ]

      // 其实这些枚举数据, 可能很多地方都要用, 通常会抽离出来做独立文件
      // 每次渲染时, 查找即可
      let res = ''
      EmployeeEnum.hireType.forEach(item => {
        // 避免一些是字符串一些是数字, 全部转成数字再判断
        if (Number(item.id) === Number(cell)) {
          res = item.value
        }
      })
      return res
    },
    async export2Excel() {
      console.log('点击了导出按钮')
      const res = await getEmployee({
        page: 1,
        size: this.total
      })
      console.log('所有员工数据', res.rows)
      // 演示生成 excel 用法
      // export_json_to_excel({
      //   // header是表头数组
      //   header: ['姓名', '工号', '手机'],
      //   // data是行数据数组, 里面嵌套的每个元素都是下一层数组组成一行行数据
      //   data: [
      //     ['小明', 1001, '13438488889'],
      //     ['小红', 1002, '13448488889'],
      //     ['小刚', 1003, '13458488889'],
      //     ['小霞', 1004, '13468488889']
      //   ]
      // })

      // // 后端api来源数据
      // const arr1 = [
      //   { mobile: '13800000002', username: '管理员' },
      //   { mobile: '13800000003', username: '孙财' },
      //   { mobile: '13800000004', username: '罗晓晓' }
      // ]
      // // 生成Excel目标数据
      // const header = ['手机号', '用户名']
      // const data = [
      //   ['13800000002', '管理员'],
      //   ['13800000003', '孙财'],
      //   ['13800000004', '罗晓晓']
      // ]

      // 改造数据 表头不固定, 根据需求来即可
      const header = ['工号', '姓名', '手机号', '聘用形式', '入职时间']
      // 改造数据, 行数据在一个二维数组中, 顺序跟着需要的表头来即可
      const data = res.rows.map(item => {
        // 数组套对象 => 数组套数组
        const user = []
        user.push(item.workNumber)
        user.push(item.username)
        user.push(item.mobile)

        // 聘用形式不能显示数字, 而是需要通过枚举数据找到的对应的数据显示
        let str = ''
        EmployeeEnum.hireType.forEach(el => {
        // 避免一些是字符串一些是数字, 全部转成数字再判断
          console.log(el)
          console.log(item.formOfEmployment)
          if (Number(el.id) === Number(item.formOfEmployment)) {
            str = el.value
          }
        })
        user.push(str)

        // 独立处理入职时间, 引入格式化日期的函数
        user.push(formatDate(item.timeOfEntry))

        return user
      })
      console.log(header)
      console.log(data)
      // 数据改造完成，直接生excel
      export_json_to_excel({
        header,
        data
      })
    },
    // 删除按钮
    async delEmployee(id) {
      try {
        // 二次询问是否删除
        await this.$confirm('是否删除')
        // 发起请求删除
        await delEmployee(id)
        // 提示
        this.$message.success('操作成功')
        // 额外可选, 如果当前页面只剩下最后一条数据,
        // 当前页码不再第一页, 可以往前翻一页
        if (this.pageConfig.page > 1 && this.list.length === 1) {
          this.pageConfig.page--
        }
        // 更新页面
        this.loadList()
      } catch (error) {
        this.$message.success('已经取消' + error)
      }
    }
  }
}
</script>

<style>

</style>
